<script setup>
import {
    Delete,
    ChatDotRound
} from '@element-plus/icons-vue'

import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';


//显示活动记录
import { myActivityListService,activityCancelService} from '@/api/activity';
import router from '@/router';
import UserInfo from '../user/UserInfo.vue';
const activities = ref([]) // 活动记录
const showActivityRecords = async() =>{
    let result = await myActivityListService()
    activities.value = result.data
}
showActivityRecords()

//删除活动
const deleteRecords = (id) => {
    //提示，用户
    ElMessageBox.confirm(
        '是否确定退出该活动',
        '温馨提示',
        {
            confirmButtonText: '确认退出',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //调用接口
            // console.log(id);
            let result = await activityCancelService(id);
            // console.log(result.msg)
            if(result.code===1)return;
            ElMessage({
                type: 'success',
                message: '成功退出',
            })
            //更新
            showActivityRecords();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退出',
            })
        })
}

//进入聊天
const chat = async(id, activityName) => {
    console.log(id);
    console.log(activityName);
    localStorage.setItem("activityId", id); //存储id
    localStorage.setItem("activityName", activityName); //存储id
    localStorage.setItem("userId", UserInfo.id); //存储id
    window.open('/activities/chat')
}


</script>

<template>
    
    <el-card>
        <template #header>
            <div class="header">
                <div>
                    加入的活动
                </div>
            </div>
        </template>
        <!-- 文章列表 -->
        <el-table :data="activities">
            <el-table-column label="活动标题" width="200" prop="activityName"></el-table-column>
            <el-table-column label="活动地点" prop="place"></el-table-column>
            <el-table-column label="活动内容" prop="thing"></el-table-column>
            <el-table-column label="截止时间" prop="endTime"> </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Delete" circle plain type="danger"  @click="deleteRecords(row.id)"></el-button>
                    <el-button :icon="ChatDotRound" circle plain type="primary" @click="chat(row.id, row.activityName)"></el-button> 
                </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
    </el-card>
</template>

<style lang="scss" scoped>
.header {
    font-weight: bolder;
}

.drawer-footer {
    margin: auto;
    text-align: center;

    .el-button {
        width: 25%;
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>

